<template>
<div v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
    <div class="icon" v-if="showIcon == 2">
        <image src="https://img.wifenxiao.com/unisapp/index/d-icon.png" mode=""></image>
    </div>
    <div ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
        <div :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
            <span :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
                :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</span>
        </div>
    </div>
    <div v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more" @click="clickMore">
        <span v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</span>
    </div>
</div>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  props: {
    text: {
      type: String,
      default: '请输入要滚动的文字'
    },
    moreText: {
      type: String,
      default: ''
    },
    backgroundColor: {
      type: String,
      default: '#fffbe8'
    },
    speed: {
      // 默认1s滚动100px
      type: Number,
      default: 50
    },
    color: {
      type: String,
      default: '#de8c17'
    },
    moreColor: {
      type: String,
      default: '#999999'
    },
    single: {
      // 是否单行
      type: [Boolean, String],
      default: false
    },
    scrollable: {
      // 是否滚动，添加后控制单行效果取消
      type: [Boolean, String],
      default: true
    },
    showIcon: {
      // 是否显示左侧icon
      type: [Number, String],
      default: 1
    },
    showGetMore: {
      // 是否显示右侧查看更多
      type: [Boolean, String],
      default: false
    },
    showClose: {
      // 是否显示左侧关闭按钮
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
    return {
      textWidth: 0,
      boxWidth: 0,
      wrapWidth: '',
      webviewHide: false,
      elId,
      elIdBox,
      show: true,
      animationDuration: 'none',
      animationPlayState: 'paused',
      animationDelay: '0s'
    }
  },
  mounted() {
    // console.log(111)
    this.$nextTick(() => {
      this.initSize()
    })
  },
  methods: {
    initSize() {
      if (this.scrollable) {
        const query = []
        const textQuery = new Promise((resolve, reject) => {
          window.$$createSelectorQuery()
            .in(this)
            .select(`#${this.elId}`)
            .boundingClientRect()
            .exec((ret) => {
              // console.log(ret, '3333')
              this.textWidth = ret[0].width
              resolve()
            })
        })
        const boxQuery = new Promise((resolve, reject) => {
          window.$$createSelectorQuery()
            .in(this)
            .select(`#${this.elIdBox}`)
            .boundingClientRect()
            .exec((ret) => {
              // console.log(ret, '4444')
              this.boxWidth = ret[0].width
              resolve()
            })
        })
        query.push(textQuery)
        query.push(boxQuery)
        Promise.all(query).then(() => {
          this.animationDuration = `${this.textWidth / this.speed}s`
          this.animationDelay = `-${this.boxWidth / this.speed}s`
          setTimeout(() => {
            this.animationPlayState = 'running'
          }, 1000)
        })
      }
    },
    clickMore() {
      this.$emit('getmore')
    },
    close() {
      this.show = false
      this.$emit('close')
    },
    onClick() {
      this.$emit('click')
    }
  }
})
</script>

<style lang="scss">
    .uni-noticebar {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		padding: 14px 10px;
	}

	.icon {
		width: 29px;
		height: 27px;
		margin-right: 10px;
	}

	.icon image {
		width: 100%;
		height: 100%;
	}

	.uni-noticebar-close {
		margin-right: 5px;
	}

	.uni-noticebar-icon {
		margin-right: 5px;
	}

	.uni-noticebar__content-wrapper {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.uni-noticebar__content-wrapper--single {
		line-height: 18px;
	}

	.uni-noticebar__content-wrapper--single,
	.uni-noticebar__content-wrapper--scrollable {
		flex-direction: row;
	}

	.uni-noticebar__content-wrapper--scrollable {
		position: relative;
		height: 18px;
	}

	.uni-noticebar__content--scrollable {
		flex: 1;
		display: block;
		overflow: hidden;
	}

	.uni-noticebar__content--single {
		display: flex;
		flex: none;
		width: 100%;
		justify-content: center;
	}

	.uni-noticebar__content-text {
		font-size: 14px;
		line-height: 18px;
		word-break: break-all;
	}

	.uni-noticebar__content-text--single {
		display: block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.uni-noticebar__content-text--scrollable {
		position: absolute;
		display: block;
		height: 18px;
		line-height: 18px;
		white-space: nowrap;
		padding-left: 100%;
		animation: notice 10s 0s linear infinite both;
		animation-play-state: paused;
	}

	.uni-noticebar__more {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-left: 5px;
	}

	.uni-noticebar__more-text {
		font-size: 14px;
	}

	@keyframes notice {
		100% {
			transform: translate3d(-100%, 0, 0);
		}
	}
</style>
